<template>
    <div style="display: flex;width: 100%;height: 100vh; ">
        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 130px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 绑定值 -->
                    <div :style='样式1'>
                        <h4>绑定值 : </h4>
                        <spen :style='样式2'>英: v_model,类型:object,默认:[]</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.v_model' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 多选框组尺寸 -->
                    <div :style='样式1'>
                        <h4>多选框组尺寸 : </h4>
                        <spen :style='样式2'>英:size,类型:enum,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.size' size='small'
                            @change="提交改变">
                            <el-radio label="large">大 </el-radio>
                            <el-radio label="default">中 </el-radio>
                            <el-radio label="small">小</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否禁用 -->
                    <div :style='样式1'>
                        <h4>是否禁用 : </h4>
                        <spen :style='样式2'>英:disabled,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.disabled' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 可被勾选的 checkbox 的最小数量 -->
                    <div :style='样式1'>
                        <h4>可被勾选的 checkbox 的最小数量 : </h4>
                        <spen :style='样式2'>英:min,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.min' size='small'
                            @change="提交改变">
                            <el-radio label=1>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 可被勾选的 checkbox 的最大数量 -->
                    <div :style='样式1'>
                        <h4>可被勾选的 checkbox 的最大数量 : </h4>
                        <spen :style='样式2'>英:max,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.max' size='small'
                            @change="提交改变">
                            <el-radio label=8>有例子 </el-radio>
                            <el-radio :label=5>无</el-radio>
                        </el-radio-group></div>
                    <!-- 为屏幕阅读器准备的标签 -->
                    <div :style='样式1'>
                        <h4>为屏幕阅读器准备的标签 : </h4>
                        <spen :style='样式2'>英:label,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.label' size='small'
                            @change="提交改变">
                            <el-radio label="阅读标签">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当按钮为活跃状态时的字体颜色 -->
                    <div :style='样式1'>
                        <h4>当按钮为活跃状态时的字体颜色 : </h4>
                        <spen :style='样式2'>英:"text-color",类型:string,默认:#ffffff</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;margin-top: 10px;'><el-radio-group
                            v-model='属性["text-color"]' size='small' @change="提交改变">
                            <spen style="font-size: 12px;"> 选择颜色 : </spen><el-color-picker v-model='属性["text-color"]'
                                style="margin-left: 10px;"></el-color-picker>
                            <el-button size="small" :icon="Delete" style="margin-left: 20px;"
                                @click="删除文本颜色">删除颜色</el-button>
                        </el-radio-group></div>
                    <!-- 当按钮为活跃状态时的边框和背景颜色 -->
                    <div :style='样式1'>
                        <h4>当按钮为活跃状态时的边框和背景颜色 : </h4>
                        <spen :style='样式2'>英:fill,类型:string,默认:#409EFF</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;margin-top: 10px;'><el-radio-group v-model='属性.fill'
                            size='small' @change="提交改变">
                            <spen style="font-size: 12px;"> 选择颜色 : </spen><el-color-picker v-model="属性.fill"
                                style="margin-left: 10px;"></el-color-picker>
                            <el-button size="small" :icon="Delete" style="margin-left: 20px;"
                                @click="删除背景颜色">删除颜色</el-button>
                        </el-radio-group></div>
                    <!-- 复选框组元素标签 -->
                    <div :style='样式1'>
                        <h4>复选框组元素标签 : </h4>
                        <spen :style='样式2'>英:tag,类型:string,默认:div</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tag' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 是否触发表单验证 -->
                    <div :style='样式1'>
                        <h4>是否触发表单验证 : </h4>
                        <spen :style='样式2'>英:"validate-event",类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["validate-event"]'
                            size='small' @change="提交改变"></el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-checkbox-group v-model="选择列组" @change="选择事件" v-bind="属性" style="margin-top: 20px;">
                <el-checkbox label="Option A" />
                <el-checkbox label="Option B" />
                <el-checkbox label="Option C" border />
                <el-checkbox label="disabled" disabled />
                <el-checkbox label="selected and disabled" disabled />
            </el-checkbox-group>
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 50 }" type="textarea" placeholder="代码展示"
                style="width: 98%;margin-top: 50px;" />
        </div>
    </div>
</template>
<script setup>

import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'

import{getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 =proxy.router

const 选择列组 = ref(['selected and disabled', 'Option A'])
const 选择事件 = () => {
    console.log(选择列组.value)
}


const 代码 = ref('')
const 提交改变=async()=>{
    let 结果=await 提交方法("组件修改",组件名.value,属性.value)
    代码.value=结果
}

const 组件名 = ref('多选框组')
const 属性 = ref({
     size: null,//多选框组尺寸
     disabled: null,//是否禁用
    min: null,//可被勾选的 checkbox 的最小数量
    max: 5,//可被勾选的 checkbox 的最大数量
    label: null,//为屏幕阅读器准备的标签
     "text-color": null,//当按钮为活跃状态时的字体颜色
     fill: null,//当按钮为活跃状态时的边框和背景颜色
     //tag: null,//复选框组元素标签
     "validate-event": null,//是否触发表单验证

})

const 重置组件=()=>{
    let 原生属性 = {
        size: null,//多选框组尺寸
     disabled: null,//是否禁用
    min: null,//可被勾选的 checkbox 的最小数量
    max: 5,//可被勾选的 checkbox 的最大数量
    label: null,//为屏幕阅读器准备的标签
     "text-color": null,//当按钮为活跃状态时的字体颜色
     fill: null,//当按钮为活跃状态时的边框和背景颜色
     //tag: null,//复选框组元素标签
     "validate-event": null,//是否触发表单验证
    }
    属性.value=原生属性

    提交改变()
}


const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')

const 删除文本颜色 = () => {
    属性.value["text-color"] = ""
}

const 删除背景颜色 = () => {
    属性.value.fill = ""
}





</script>
<style  scoped></style>
